<template>
    <div class="amap-page-container">
      <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
      </el-amap>

      <div class="toolbar">
        <p v-if="loaded">
          <!-- location: lng = {{ lng }} lat = {{ lat }}< br /> -->
          {{address}}
        </p>
        <p style="color:red;" v-else>正在定位...</p>
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
    .toolbar{
      width: 100%;
      text-align: center;
    }
    .toolbar p{
      width: 100%;
      text-align: center;

    }
  </style>

  <script>
  import {getAddress} from "@/API"
    export default {
      created() {
        //do something after creating vue instance
        // getAddress(this.lng ,this.lat).then(res=>{
        //   console.log(res)
        //   self.address=res.regeocode.formatted_address
        // })
      },
      data() {
        let self = this;
        return {
          center: [121.59996, 31.197646],
          lng: 116.3585,
          lat: 0,
          address:"",
          loaded: false,
          plugin: [{
            pName: 'Geolocation',
            events: {
              init(o) {
                // o 是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    console.log(result.position)
                    self.lng = result.position.lng;
                    self.lat = result.position.lat;
                    localStorage.setItem("lng",self.lng)
                    localStorage.setItem("lat",self.lat)
                    self.loaded = true;
                    self.$nextTick();
                    getAddress(self.lng ,self.lat).then(res=>{
                      console.log(res)
                      self.address=res.regeocode.formatted_address
                    })

                  }
                });
              }
            }
          }]
        };
      }
    };
</script>
